{% extends "layout/base.html" %}

{% block title %}{{ dataset | printable_dataset }}{% endblock %}

{% set extent_geojson = dataset | dataset_geojson %}

{% block head %}
    {{ super() }}
    <style type="text/css">
        .tree-node {
            margin-left: 30px;
        }

        .dataset-location + .dataset-location {
            margin-top: 15px;
        }

        .file-path {
            font-family: monospace;
            font-size: 12px;
        }

        #dataset-map {
            height: 500px;
        }
    </style>
{% endblock %}
{% block panel %}

{% endblock %}
{% block content %}
    {% from "layout/macros.html" import query_param_list, show_raw_document %}
    <div class="panel highlight">
        <h1><strong>{{ dataset | printable_dataset }}</strong></h1>
        <div class="sub-header">
            <span>
                Indexed by <strong>{{ dataset.indexed_by }}</strong>
                {{ dataset.indexed_time | timesince }},
                created {{ dataset | dataset_created | timesince }}
                {% if dataset.archived_time %}
                    <div>
                        Archived
                        <span title="{{ dataset.archived_time }}">
                        {{ dataset.archived_time | timesince }}
                        </span>
                    </div>
                {% endif %}
            </span>
        </div>
        <div class="sub-header">
            {{ dataset.type.name | product_link }} of {{ dataset | dataset_day_link(grouping_timezone) }}
            ({{ dataset.type.metadata_type.name }})
        </div>
    </div>

    <div class="panel">
        {% for classifier, s_dataset in source_datasets.items() %}
            <div>
                <span title="Source '{{ classifier }}'">
                    <i class="fa fa-level-up fa-flip-horizontal" aria-hidden="true"></i>
                    <a href="{{ url_for('dataset.dataset_page', id_=s_dataset.id) }}">
                        {{ s_dataset | printable_dataset }}
                    </a>
                </span>
            </div>
        {% endfor %}
        {% if source_dataset_overflow %}
            <span title="Too many to display">... {{ source_dataset_overflow }} more</span>
        {% endif %}
        <div class="tree-node">
            <strong class="active-tree-node">
                <i class="fa fa-caret-right" aria-hidden="true"></i>
                {{ dataset | printable_dataset }}
            </strong>
            {% for d_dataset in derived_datasets %}
                <div class="tree-node">
                    <span title="Derived {{ d_dataset.type.name }}">
                        <i class="fa fa-level-down" aria-hidden="true"></i>
                        <a href="{{ url_for('dataset.dataset_page', id_=d_dataset.id) }}">
                            {{ d_dataset | printable_dataset }}
                        </a>
                    </span>
                </div>
            {% endfor %}
            {% if derived_dataset_overflow %}
                <span title="Too many to display">... {{ derived_dataset_overflow}} more</span>
            {% endif %}
        </div>

    </div>
    <div class="panel odd">
        <h2>Fields</h2>
        {{ query_param_list(
            dataset.metadata.fields,
            wide=true,
            show_dicts=false,
            descriptions=dataset.type.metadata_type.dataset_fields
            ) }}
    </div>
    <div class="panel">
        <h2>Locations</h2>
        {% for uri in dataset.uris %}
            <div class="dataset-location">
                <div><strong>Active:</strong></div>
                <span class="file-path">{{ uri }}</span>
            </div>
        {% else %}
            No known active locations
        {% endfor %}

        {% if archive_location_times %}
            {% for uri, archive_time in archive_location_times %}
                <div class="dataset-location">
                    <div><strong>Archived {{ archive_time | timesince }}:</strong></div>
                    <span class="file-path archived">{{ uri }}</span>
                </div>
            {% endfor %}
        {% endif %}
    </div>

    {% if extent_geojson %}
        <div id="dataset-map"></div>
    {% endif %}

    <div class="panel odd">
        <h2>Raw Metadata</h2>
        {{ show_raw_document(dataset_metadata) }}
    </div>
{% endblock %}

{% block body_footer %}
    {{ super() }}
    
    {% if extent_geojson %}
        <script type="application/javascript">

            const osm_carto_light = L.tileLayer(
                "//cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
                {
                    maxZoom: 7,
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,' +
                    ' &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
                }
            );

            const dataset_data = L.geoJson({{ extent_geojson | torapidjson }},
                {
                    interactive: false,
                    style: function (feature) {
                        return {
                            color: "#1d81a7",
                            fill: true,
                            fillColor: "#1d81a7",
                            opacity: 0.8,
                            weight: 2,
                            clickable: false
                        };
                    }
                });
            const map = L.map("dataset-map", {
                zoom: 3,
                center: [-26.2756326, 134.9387844],
                layers: [osm_carto_light, dataset_data],
                zoomControl: false,
                attributionControl: false,
                scrollWheelZoom: false
            });
            L.control.zoom({position: "bottomright"}).addTo(map);
            map.fitBounds(dataset_data.getBounds(), {animate: false, maxZoom: 5});

            window.MAP = map;
        </script>
    {% endif %}

{% endblock %}
